<template>
  <div
    class="headbar"
    :style="{'background':themeColor}"
    :class="$store.state.app.collapse?'position-collapse-left':'position-left'"
  >
    <!-- 导航收缩 -->
    <!-- <span class="hamburg">
        <el-menu
          class="el-menu-demo"
          :background-color="themeColor"
          text-color="#fff"
          :active-text-color="themeColor"
          mode="horizontal"
        >
          <el-menu-item index="1" @click="onCollapse">
            <hamburger :isActive="collapse"></hamburger>
          </el-menu-item>
        </el-menu>
    </span>-->
    <!-- 导航菜单 -->
    <span class="navbar">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        :background-color="themeColor"
        text-color="#fff"
        active-text-color="#ffd04b"
        mode="horizontal"
        @select="selectNavBar()"
      >
        <el-menu-item index="1" @click="$router.push('/')">
          <i class="fa fa-home fa-lg"></i>
        </el-menu-item>
        <!-- <el-menu-item index="2" @click="openWindow('https://gitee.com/liuge1988/kitty')">{{$t("common.projectRepo")}}</el-menu-item>
        <el-menu-item index="3" @click="openWindow('https://gitee.com/liuge1988/kitty/wikis/Home')">{{$t("common.doc")}}</el-menu-item>
        <el-menu-item index="4" @click="openWindow('https://www.cnblogs.com/xifengxiaoma/')">{{$t("common.blog")}}</el-menu-item>-->
      </el-menu>
    </span>
    <!-- 菜单start -->
    <div class="menuHeader">
      <div @click="scrollLeft()" class="leftIcon icon" v-show="leftShow">
        <i class="el-icon-arrow-left"></i>
      </div>
      <div class="ul">
        <menu-header :number="number"></menu-header>
      </div>
      <div @click="scrollRight()" class="rightIcon icon"  v-show="rightShow">
        <i class="el-icon-arrow-right"></i>
      </div>
    </div>
    <!-- 菜单end -->
    <!-- 工具栏 -->
    <span class="toolbar">
      <el-menu
        class="el-menu-demo"
        :background-color="themeColor"
        :text-color="themeColor"
        :active-text-color="themeColor"
        mode="horizontal"
      >
        <!-- <el-menu-item index="1">
          <theme-picker class="theme-picker" :default="themeColor" @onThemeChange="onThemeChange"></theme-picker>
        </el-menu-item>-->
        <!-- 语言切换 -->
        <!-- <el-menu-item index="2" v-popover:popover-lang>
          <li style="color:#fff;" class="fa fa-language fa-lg"></li>
          <el-popover ref="popover-lang" placement="bottom-start" trigger="click" v-model="langVisible">
            <div class="lang-item" @click="changeLanguage('zh_cn')">简体中文</div>
            <div class="lang-item" @click="changeLanguage('en_us')">English</div>
          </el-popover>
        </el-menu-item>-->
        <el-menu-item index="3" v-popover:popover-message>
          <!-- 我的私信 -->
          <el-badge :value="warnSize" :max="99" class="badge" type="success">
            <li style="color:#fff;" class="fa fa-envelope-o fa-lg"></li>
          </el-badge>
          <el-popover ref="popover-notice" placement="bottom-end" trigger="click" >
            <message-panel
              :tableData="tableData"
              :total="errorSize"
              @changeWarnSize="changeWarnSize"
             ></message-panel>
          </el-popover>
        </el-menu-item>
        <el-menu-item index="4" v-popover:popover-notice>
          <!-- 系统通知 -->
          <el-badge :value="errorSize" :max="99" class="badge" type="success">
            <li style="color:#fff;" class="fa fa-bell-o fa-lg"></li>
          </el-badge>
          <el-popover ref="popover-message" placement="bottom-end" trigger="click">
            <notice-panel @changeErrorSize="changeErrorSize"
              :tableData="tableData2"
              :total="warnSize"
            ></notice-panel>
          </el-popover>
        </el-menu-item>
        <el-menu-item index="5" v-popover:popover-personal>
          <!-- 用户信息 -->
          <span class="user-info">{{user.username}}</span>
          <el-popover
            ref="popover-personal"
            placement="bottom-end"
            trigger="click"
            :visible-arrow="false"
          >
            <personal-panel :user_info="user"></personal-panel>
          </el-popover>
        </el-menu-item>
      </el-menu>
    </span>
  </div>
</template>

<script>
import { mapState } from "vuex";
import mock from "@/mock/index";
import Hamburger from "@/components/Hamburger";
import ThemePicker from "@/components/ThemePicker";
import LangSelector from "@/components/LangSelector";
import Action from "@/components/Toolbar/Action";
import NoticePanel from "@/views/Core/NoticePanel";
import MessagePanel from "@/views/Core/MessagePanel";
import PersonalPanel from "@/views/Core/PersonalPanel";
import menuHeader from "@/components/MenuTree/menuHeader";
export default {
  components: {
    Hamburger,
    ThemePicker,
    LangSelector,
    Action,
    NoticePanel,
    MessagePanel,
    PersonalPanel,
    menuHeader
  },
  data() {
    return {
      user: {
        username: "暂无",
      },
      activeIndex: "1",
      langVisible: false,
      warnSize: 1,
      errorSize: 2,
      count: 0, //左移的个数
      number: 0, //左右的距离
      leftShow: false,
      rightShow: true,
      tableData:[{
        in_batch_number:1,
        client_name:"保质期预警",
        warning_days:124,
        sku_name:"小熊饼干",
        warningday:"2019-07-12"
      },{
        in_batch_number:2,
        client_name:"保质期预警",
        warning_days:165,
        sku_name:"三只松鼠大礼包【五一套装】",
        warningday:"2019-06-02"
      }],
      tableData2:[{
        in_batch_number:1,
        client_name:"过期通知",
        is_expired_days:65,
        sku_name:"新疆炒米粉套装",
        // is_expired_days:"2019-10-19"
      }]
    };
  },
  methods: {
    openWindow(url) {
      window.open(url);
    },
    selectNavBar(key, keyPath) {
      console.log(key, keyPath);
    },
    // 折叠导航栏
    onCollapse: function() {
      this.$store.commit("onCollapse");
    },
    // 切换主题
    onThemeChange: function(themeColor) {
      this.$store.commit("setThemeColor", themeColor);
    },
    // 语言切换
    changeLanguage(lang) {
      lang === "" ? "zh_cn" : lang;
      this.$i18n.locale = lang;
      this.langVisible = false;
    },
    changeErrorSize(val) {
      this.errorSize = val;
    },
    changeWarnSize(val) {
      this.warnSize = val;
    },
    scrollRight() {
      // debugger;
      if (this.count >= 8) {
        return false;
      }
      this.count += 1;
      if (this.count >= 8) {
        this.rightShow = false;
      } else {
        this.leftShow = true;
        this.rightShow = true;
      }
      this.number += -document.querySelector("#li" + this.count).clientWidth;
    },
    scrollLeft() {
      // debugger;
      if (this.count == 0) {
        return false;
      }
      this.count -= 1;
      if (this.count == 0) {
        this.leftShow = false;
      } else {
        this.leftShow = true;
        this.rightShow = true;
      }
      this.number += document.querySelector("#li" + this.count).clientWidth;
    }
  },
  mounted() {
    let that = this;
    this.utils.request.sysUserQueryPage({"id":localStorage.getItem("userId")}, function(data) {
      // debugger
        console.log(data);
        // debugger
        that.user = data.data.rows[0];
    })
    // this.sysName = "微众平台";
    // var user = localStorage.getItem("user");
    // this.user.name = localStorage.getItem("userName");
    // this.user.avatar = localStorage.getItem("portraitUri");
  },
  computed: {
    ...mapState({
      themeColor: state => state.app.themeColor,
      collapse: state => state.app.collapse,
      navTree: state => state.menu.navTree
    })
  }
};
</script>

<style scoped lang="scss">
.headbar {
  width: 100%;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1030;
  height: 60px;
  line-height: 60px;
  border-color: rgba(180, 190, 190, 0.8);
  border-left-width: 1px;
  border-left-style: solid;
  display: flex;
  justify-content: space-between;
}
// .hamburg,
.navbar {
  position: absolute;
  left: 0;
  z-index: 999;
  width: 60px;
}
.menuHeader {
  height: 100%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 57px;
  right: 212px;
  overflow: hidden;
  padding-right: 30px;
  box-sizing: border-box;
}
.ul {
  width: 100%;
  // background: rgb(20, 136, 154);
  background: #2F4554;
  overflow: hidden;
  left: 20px;
  right: 20px;
}
.ul ul {
  display: flex;
  position: relative;
  padding: 0;
  transition: left 0.5s linear 0s;
  background: #2F4554;
}
.ul ul li {
  color: red !important;
}
.leftIcon,
.rightIcon,
.ul {
  position: absolute;
}
.leftIcon,
.rightIcon {
  width: 20px;
  height: 100%;
  cursor: pointer;
  z-index: 99999;
  color: #fff;
  background-color: #4e738d;
}
.leftIcon {
  left: 0;
}
.rightIcon {
  right: 0;
}
.toolbar {
  position: absolute;
  right: 0;
  z-index: 999;
}
.lang-item {
  font-size: 16px;
  padding-left: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
  cursor: pointer;
}
.lang-item:hover {
  font-size: 18px;
  background: #b0d6ce4d;
}
.user-info {
  font-size: 20px;
  color: #fff;
  cursor: pointer;
  img {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    margin: 10px 0px 10px 10px;
    float: right;
  }
}
.badge {
  line-height: 18px;
}
.position-left {
  // left: 200px;
}
.position-collapse-left {
  left: 65px;
}
</style>
